class SwiperComponent {
  constructor(containerName, imgs) {
    this.containerEle = $(containerName);
    this.imgs = imgs;
    this.w = this.containerEle.width();
    this.h = this.containerEle.height();
    this.index = 1; //当前页码
    this.timer = null;

    this.createImgDom();
    this.cloneNodes();
    this.createDot();
    this.autoPlay();
    this.prevOrNext();
    this.changeDot();
  }
  // 创建图片节点
  createImgDom() {
    this.imgContainer = $("<div></div>", {
      style: `width:${this.w * this.imgs.length}px;position:absolute;`,
    });
    this.imgs.forEach((img) => {
      let imgEle = $(`<img />`, {
        src: img,
        style: `float:left;width:${this.w}px;height:${this.h}px;`,
      });
      this.imgContainer.append(imgEle);
    });
    this.containerEle.append(this.imgContainer);
  }
  // 克隆节点 ，为实现无缝轮播图做铺垫
  cloneNodes() {
    let fEle = this.imgContainer.find("img").first().clone();
    let lEle = this.imgContainer.find("img").last().clone();
    this.imgContainer.width((this.imgs.length + 2) * this.w);
    this.imgContainer.find("img").last().after(fEle);
    this.imgContainer.find("img").first().before(lEle);
    this.imgContainer.css("left", -this.w);
  }
  // 自动播放相关函数
  autoPlay() {
    this.timer = setInterval(() => {
      this.index++;

      this.imgContainer.animate({ left: "-" + this.index * this.w }, () => {
        // console.log(this.index);
        if (this.index == this.imgs.length + 1) {
          console.log(55555, this.imgContainer, this.w);
          this.imgContainer.css("left", "-" + this.w + "px");
          this.index = 1;
        }
        this.changeDot();
      });
    }, 2000);
  }

  // 上一页下一页功能
  prevOrNext() {
    this.createPrevAndNextEle();
    // 鼠标移上按钮的时候停止自动轮播定时器
    this.prevAndNextEle.find("span").mouseenter(() => {
      clearInterval(this.timer);
    });

    this.prevAndNextEle.find("span").mouseleave(() => {
      this.autoPlay();
    });

    this.prevAndNextEle
      .find("span")
      .first()
      .click(() => {
        console.log("上一页");
        this.index--;

        this.imgContainer.animate({ left: "-" + this.index * this.w }, () => {
          // console.log(this.index);
          if (this.index == 0) {
            console.log(55555, this.imgContainer, this.w);
            this.imgContainer.css(
              "left",
              "-" + this.w * this.imgs.length + "px"
            );
            this.index = this.imgs.length;
          }
          this.changeDot();
        });
      });
    this.prevAndNextEle
      .find("span")
      .last()
      .click(() => {
        console.log("下一页");
        this.index++;

        this.imgContainer.animate({ left: "-" + this.index * this.w }, () => {
          // console.log(this.index);
          if (this.index == this.imgs.length + 1) {
            console.log(55555, this.imgContainer, this.w);
            this.imgContainer.css("left", "-" + this.w + "px");
            this.index = 1;
          }
          this.changeDot();
        });
      });
  }
  // 创建上一页下一页dom结构
  createPrevAndNextEle() {
    let prevAndNextEle = $("<div></div>", {
      style: `width:100%;height:50px;color:white;font-size:40px;position:absolute;top:50%`,
      html: `<span style='float:left;'><</span><span style='float:right'>></span>`,
    });
    this.prevAndNextEle = prevAndNextEle;
    this.containerEle.append(prevAndNextEle);
  }

  // 创建自动轮播的控制点功能
  createDot() {
    this.createDotDom();
    // 鼠标移到点上的之后停止自动播放
    this.dotEles.find("span").mouseenter(() => {
      clearInterval(this.timer);
    });
    this.dotEles.find("span").mouseleave(() => {
      this.autoPlay();
    });

    // 点击点切换轮播图功能
    let that = this;
    this.dotEles.find("span").click(function () {
      that.dotEles.find("span").css("background", "red");
      $(this).css("background", "white");

      let index = that.dotEles.find("span").index($(this));
      // console.log(index);
      that.index = index + 1;
      that.imgContainer.animate({ left: "-" + that.index * that.w });
    });
  }

  // 根据索引检测应该点击的点在哪里
  changeDot() {
    // console.log(this.dotEles)
    if (typeof this.dotEles !== "undefined") {
      console.log(123);
      this.dotEles.find("span").css("background", "red");
      this.dotEles
        .find("span")
        .eq(this.index - 1)
        .css("background", "white");
    }
  }

  createDotDom() {
    this.dotEles = $(`<div></div>`, {
      style:
        "width:100%;height:30px;display:flex;justify-content: center;position:absolute;bottom:1%",
    });

    this.imgs.forEach((item) => {
      let imgEle = $("<span></span>", {
        style:
          "display:block;width:20px;height:20px;background:red;border-radius: 50%;margin:3px",
      });
      this.dotEles.append(imgEle);
    });

    this.containerEle.append(this.dotEles);
  }
}

let imgs = [
  "../images/banner1.png",
  "../images/banner2.jpg",
  "../images/banne3.jpg",
  "../images/banner4.jpg",
  "../images/banner5.jpg",
  "../images/banner6.jpg"
];
new SwiperComponent(".swiper-container", imgs);
